<template>
  <div v-show="code === 200 ">
    <div id="piechart"  v-if="countView" :style="{width: '1000px', height: '800px'}" v-model="webname"></div>
  </div>
</template>

<script>
import {mapState} from 'vuex'
export default {
  name: "PieChart",
  data(){
    return{
      countView:true,
      code: 200,
    }
  },
  computed:{
    ...mapState(['date','time']),
    //同时监听两个数据
    listenChange () {
      const _this = this
      const date = _this.date
      const time =_this.time
      return {date,time}
    }
  },
  props:['webname'],
  methods: {
    getPieChartData(){
      const _this = this
      var api
      switch (this.webname) {
        case '腾讯新闻' :
          if (_this.date === null && _this.time === null) {
            api = this.$base_url+'piechart/piewithscrollablelegend/txnewhot';
          } else {
            api = this.$base_url+'piechart/piewithscrollablelegend/txhot/' + _this.date + '/' + _this.time;
          }
          break;
        case '今日头条' :
          if (_this.date === null && _this.time === null) {
            api = this.$base_url+'piechart/piewithscrollablelegend/jrnewhot';
          } else {
            api = this.$base_url+'piechart/piewithscrollablelegend/jrhot/' + _this.date + '/' + _this.time;
          }
          break;
        case '百度热搜' :
          if (_this.date === null && _this.time === null) {
            api = this.$base_url+'piechart/piewithscrollablelegend/bdnewhot';
          } else {
            api = this.$base_url+'piechart/piewithscrollablelegend/bdhot/' + _this.date + '/' + _this.time;
          }
          break;
        case '微博热搜' :
          if (_this.date === null && _this.time === null) {
            api = this.$base_url+'piechart/piewithscrollablelegend/wbnewhot';
          } else {
            api = this.$base_url+'piechart/piewithscrollablelegend/wbhot/' + _this.date + '/' + _this.time;
          }
          break;
        default :
          api = this.$base_url+'piechart/piewithscrollablelegend/wbnewhot';
          break
      }
      this.$axios.get(api).then(function (response) {
        if (response.data.code!=200){
          _this.code=response.data.code
        } else {
          _this.code=response.data.code
          const myChart = _this.$echarts.init(document.getElementById('piechart'))
          // 绘制图表
          myChart.setOption({
              backgroundColor:'#FFFFFF',//背景颜色白色
              title: {
                text: '热搜饼图',
                top: 20,
                left: 'center',
                textStyle: {
                  color: '#555555',
                }
              },
              tooltip: {
                trigger: 'item',
                formatter: '{b} : {c} ({d}%)'
              },
              legend: {
                type: 'scroll',
                orient: 'parallel',
                right: 10,
                top: 650,
                bottom: 20,
                data: response.data.data[0].topic,
              },
              series: [
                {
                  name: '标题',
                  type: 'pie',
                  radius: '60%',
                  center: ['50%', '40%'],
                  avoidLabelOverlap: true,
                  data: response.data.data[0].piedata,
                  emphasis: {
                    itemStyle: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                  }
                }
              ]
            })
          myChart.on("click", function(params) {
            window.location.href = response.data.data[0].url[params.dataIndex];
            // var href = response.data.data[0].url[params.dataIndex];
            // window.open(href,"_blank")
          });
        }
      })
    }
  },
  mounted() {
    if (this.$route.name =='Chart'){
      this.getPieChartData()
    }
  },
  watch:{
    webname(val) {
      if (this.$route.name =='Chart'){
        this.getPieChartData()
      }
    },
    listenChange(val){
      if (this.$route.name ==='Chart'){
        const _this = this
        _this.getPieChartData()
        //获取数据重新刷新页面
        _this.countView=false
        _this.$nextTick(()=>{
          _this.countView=true
        })
      }
    },
  }
}
</script>

<style scoped>
#piechart{
  margin-top: 5px;
  margin-bottom: 5px;
}
</style>